.chart-selector {
  padding-top: 20px;
  user-select: none;
  width: 500px;
  // background: linear-gradient(135deg, rgba(15, 35, 65, 0.95) 0%, rgba(8, 25, 45, 0.98) 100%);
  border-radius: 8px;
  overflow: hidden;
  @media screen and (max-width: 1920px) {
    transform: scale(0.4862);
    transform-origin: top left;
  }
  @media screen and (max-width: 1080px) {
    transform: scale(0.2733);
    transform-origin: top left;
  }
  @media screen and (min-width: 5120px) {
    transform: scale(1.2955);
    transform-origin: top left;
  }
  .icon-background {
    // 基于蓝湖坐标：位置 199px 854px，相对于组件内的定位
    position: absolute;
    left: 179px;   // 199 - 20 (padding) = 179px
    top: 20px;     // 调整到组件顶部
    width: 104px;
    height: 30px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
  }

  .tab-selector {
    padding-right: 6%;
    //position: absolute;
    //left: 281px;   // 301 - 20 = 281px
    //top: 20px;     // 854 相对位置调整到顶部
    display: flex;
    justify-content: right;
    //z-index: 2;

    .tab-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 105px;
      height: 30px;
      border: 1px solid #3A4E74;
      cursor: pointer;
      transition: all 0.3s ease;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 14px;
    }
    .tab-item:first-child{
      border-radius: 4px 0 0 4px;
      border-right: none;
    }
    .tab-item:last-child{
      border-radius: 0 4px 4px 0;
      border-left: none;
    }
    .isActive{
      color: rgba(255,255,255,1);
      border: 1px solid #43c3f5 !important;
      background: linear-gradient(to bottom, rgba(67,195,245, 0) 20%, rgba(67,195,245, 1));
    }
    .unActive{
      border: 1px solid #3A4E74 !important;
      background: rgba(5, 18, 34, 0.20);
      color: rgba(255,255,255,0.9);
    }
  }

  .chart-area {
    width: 100%;
    height: calc(100% - 50px);
    margin-top: 20px;
  }

  // 主题样式
  &.dark {
    // 默认深色主题
  }

  &.light {
    background: linear-gradient(135deg, rgba(245, 248, 255, 0.95) 0%, rgba(235, 245, 255, 0.98) 100%);

    .tab-selector {
      .tab-item {
        background-color: rgba(255, 255, 255, 0.8);
        border-color: rgba(0, 0, 0, 0.2);
        color: rgba(0, 0, 0, 0.8);

        &:hover {
          background-color: rgba(90, 143, 255, 0.2);
          color: rgba(0, 0, 0, 0.9);
        }

        &.active {
          background-color: rgba(90, 143, 255, 0.3);
          color: rgba(0, 0, 0, 0.9);
        }
      }
    }

    .chart-area {
      .chart-container {
        background: rgba(255, 255, 255, 0.1);

        .chart-labels span,
        .chart-y-axis span {
          color: rgba(0, 0, 0, 0.7);
        }

        .chart-legend .legend-item {
          color: rgba(0, 0, 0, 0.8);
        }
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    padding: 15px;

    .icon-background {
      left: calc(179px * 0.8);
      top: 15px;
      width: calc(104px * 0.8);
      height: calc(30px * 0.8);
    }

    .tab-selector {
      left: calc(281px * 0.8);
      top: 15px;

      .tab-item {
        width: calc(105px * 0.8);
        height: calc(30px * 0.8);
        font-size: calc(14px * 0.9);
      }
    }

    .chart-area {
      top: 60px;
      left: 15px;
      right: 15px;
      bottom: 15px;

      .chart-container {
        padding: 15px;

        .chart-labels {
          font-size: 10px;
          bottom: 30px;
        }

        .chart-y-axis {
          font-size: 9px;
        }

        .chart-legend {
          .legend-item {
            font-size: 10px;
            gap: 4px;
          }
        }
      }
    }
  }

  @media (max-width: 480px) {
    padding: 10px;

    .icon-background {
      left: calc(179px * 0.6);
      width: calc(104px * 0.6);
      height: calc(30px * 0.6);
    }

    .tab-selector {
      left: calc(281px * 0.6);
      flex-direction: column;
      gap: 2px;

      .tab-item {
        width: calc(105px * 0.6);
        height: calc(30px * 0.6);
        font-size: calc(14px * 0.8);

        &.first,
        &.middle,
        &.last {
          border-radius: 4px;
          border: 1px solid #3A4E74;
        }
      }
    }

    .chart-area {
      top: 120px; // 增加顶部空间以适应垂直排列的选项卡

      .chart-container {
        padding: 10px;

        .chart-labels {
          font-size: 8px;
          bottom: 20px;

          span {
            transform: rotate(-30deg);
          }
        }

        .chart-legend {
          flex-direction: column;
          gap: 8px;
          top: 5px;
          right: 10px;

          .legend-item {
            font-size: 9px;
            gap: 3px;
          }
        }
      }
    }
  }

  // 焦点可访问性
  &:focus-within {
    outline: 2px solid rgba(26, 215, 255, 0.5);
    outline-offset: 2px;
  }

  // 高对比度模式
  @media (prefers-contrast: high) {
    .tab-selector .tab-item {
      border-width: 2px;
    }

    .chart-area .chart-container {
      border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .chart-labels span,
    .chart-y-axis span,
    .chart-legend .legend-item {
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    }
  }

  // 减少动画
  @media (prefers-reduced-motion: reduce) {
    .tab-item {
      transition: none;
      transform: none;
    }

    .tab-item:hover,
    .tab-item:active {
      transform: none;
    }
  }

  // 加载状态
  &.loading {
    .chart-area {
      opacity: 0.5;
      pointer-events: none;

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 32px;
        height: 32px;
        margin: -16px 0 0 -16px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-top-color: #1E90FF;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
    }
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  // 无数据状态
  &.no-data {
    .chart-area .chart-container {
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.5);
      font-size: 16px;
      font-weight: 500;

      &::before {
        content: '暂无图表数据';
      }

      .chart-placeholder {
        display: none;
      }
    }
  }
}
